<template>
	<div class="liquidwarp">
		
	
    <div id="container" class="container">
        <div id="container1"></div>
        <div id="container2"></div>
    </div>
    </div>
</template>
<script>
	import { Liquid, measureTextWidth } from '@antv/g2plot';
export default {
    data() {
        return {};
    },
    created(){
    	
    },
    mounted() {
        this.$nextTick(() => {
            this.initZlChart2();
   //          let data = 0.25;
			// const interval = setInterval(() => {
			//     data += Math.min(Math.random() * 0.1, 0.1);
			//     if (data < 0.75) {
			//         liquidPlot.changeData(data);
			//     } else {
			//         clearInterval(interval);
			//     }
			// }, 500);
        })
    },
    methods: {
    	initZlChart2(){
    		const liquidPlot = new Liquid(document.getElementById('container'), {
			    percent: 1,
			    radius: 0.8,
			    statistic: {
			        title: {
			            formatter: () => '100%',
			            style: ({ percent }) => ({
			                // fill: percent > 0.65 ? 'white' : 'rgba(44,53,66,0.85)',
			                fill: 'white'

			            }),
			        },
			        content: {
			            style: ({ percent }) => ({
			                fontSize: 23,
			                lineHeight: 1,
			                // fill: percent > 0.65 ? 'white' : 'rgba(44,53,66,0.85)',
			                fill: 'white'

			            }),
			            customHtml: (container, view, { percent }) => {
			                const { width, height } = container.getBoundingClientRect();
			                const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
			                // const text = `占比 ${(percent * 100).toFixed(0)}%`;
			                const text = `上线率`;

			                const textWidth = measureTextWidth(text, { fontSize: 60 });
			                const scale = Math.min(d / textWidth, 1);
			                return `<div style="width:${d}px;display:flex;align-items:center;justify-content:center;font-size:${scale}em;line-height:${
			          scale <= 1 ? 1 : 'inherit'
			        }">${text}</div>`;
			            },
			        },
			    },
			    liquidStyle: ({ percent }) => {
			        return {
			            // fill: percent > 0.45 ? '#0CFED9' : '#FAAD14',
			            fill: '#0CFED9',

			            // stroke: percent > 0.45 ? '#0CFED9' : '#FAAD14',
			            stroke: '#0CFED9',

			        };
			    },
			    color: () => '#5B8FF9',
			});
			liquidPlot.render();
    	}
    }
};
</script>
<style type="text/css">
.container{
	width: 200px;
	height: 284px;
}
	.liquidwarp{
		display: flex;
		font-size: 26px;
		justify-content: center;
		align-items: center;
	}
</style>